<template>
<div>
  <Header title="购物车"></Header>

  <div class="good" v-for="(item,index) in cart" :key="item.id">
    <div class="left">{{item.title}}</div>
    <div class="right">
      <div class="price">单价{{item.price}}</div>
      <div class="btn">
         <i class="cubeic-remove" @click="cartRemove(index)"></i>
      <span>{{item.cartCount}}</span>
      <i class="cubeic-add" @click="cartAdd(index)"></i>
      </div>

    </div>
  </div>
  <hr>
  <div>
    {{total}}
    <cube-button :disabled="true" v-if="total<mintotal">
      还差{{mintotal - total}}元购买
         </cube-button>
         <cube-button v-else>
           下单购买
           <span v-if="!token">
             (请登录购买)
           </span>
         </cube-button>
  </div>
</div>
</template>

<script>
import Header from '@/components/Header.vue'
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
      mintotal: 1000
    }
  },
  components: {
    Header
  },
  computed: {
    ...mapState({
      cart: state => state.cart,
      token: state => state.token
    }),
    ...mapGetters({
      total: 'total'
    })
  },
  methods: {
    cartAdd (index) {
      this.$store.commit('cartAdd', index)
    },
    cartRemove (index) {
      this.$store.commit('cartRemove', index)
    }
  }
}

</script>
<style lang="stylus" scoped>
.good
  height 40px
  margin-bottom 20px
.good,hr
  clear both
.left
  float left
  line-height 40px
.right
  float right
.price
  color #ff0000
.btn
  line-height 20px
  i
  font-size 20px
</style>
